<%@page import="org.jgs1904.enums.PostTypeEnum"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>帖子浏览页</title>
<style type="text/css">
	#container {
		width: 1000px;
		border: solid 2px green;
		margin: 50px auto;
		padding: 30px;
	}
	
	#header {
		width: 100%;
		height: 50px;
		font-size: 22px;
		text-align: center;
		line-height: 50px;
		margin: 0 auto;
		border: solid 1px green;
		background-color: green;
		color: white;
		position: relative;
	}

	#online_user {
		position: absolute;
		left: 30px;
		top: 0;
	}
	
	#header_btn {
		position: absolute;
		right: 30px;
		top: 0;
	}
	
	#content {
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
		border: solid 1px green;
		position: relative;
	}
	
	#content table {
		width: 100%;
	}
	
	#paging,#search {
		width: 100%;
		text-align: center;
		margin: 30px 0;
	}
</style>
</head>
<body>
	<div id="container">
		<div id="header">
		
			<c:if test="${ onlineUser != null }">
				<span id="online_user">
					当前用户：${ onlineUser.nickname }
					<c:if test="${ onlineUser.photo != null }">
						<img alt="头像错误" src="${ bp }/${ onlineUser.photo }" style="height:40px;vertical-align: middle;">
					</c:if>
				</span>
			</c:if>
			<c:if test="${ onlineUser == null }">
				<span id="online_user">登录之后才可以发帖和评论！</span>
			</c:if>
			
			<span id="header_btn">
			
				<c:if test="${ onlineUser == null }">
					<a href="${ bp }/user/login.jsp">立即登录</a>
				</c:if>
				
				<c:if test="${ onlineUser != null }">
					<a href="${ bp }/user?method=logout">退出账号</a>
				</c:if>
				
				<c:if test="${ onlineUser != null }">
					<a href="${ bp }/post/send.jsp">我要发帖</a>
				</c:if>
					
			</span>
		</div>
	
		<div id="content">
		
			<div id="search">
				<form action="${ bp }/post?method=page" method="post">
					标题：
					<input type="text" name="%title%" value='${ post["%title%"][0] }'>
					摘要：
					<input type="text" name="%summary%" value='${ post["%summary%"][0] }'>
					内容：
					<input type="text" name="%content%" value='${ post["%content%"][0] }'>
					<br>
					时间区间：
					<input type="date" name="create_time%range" value='${ post["create_time%range"][0] }'>
					--
					<input type="date" name="create_time%range" value='${ post["create_time%range"][1] }'>
					<input type="submit" value="查询">
					<!-- 隐藏域内容 -->
					<input type="hidden" name="currentPage" value="${ pager.currentPage }">
					<input type="hidden" name="pageSize" value="${ pager.pageSize }">
				</form>
			</div>
			
			<div style="margin:10px;text-align:right;">
				<a href="${ bp }/post?method=exportExcel">导出数据</a>
				<form action="${ bp }/post?method=importExcel" method="post" enctype="multipart/form-data" style="display:inline-block;">
					<input type="file" name="excel">
					<input type="submit" value="导入数据">
				</form>
			</div>
		
			<table border="1" cellpadding="5px" cellspacing="0">
				<tr>
					<th>序号</th>
					<th>封面</th>
					<th>标题</th>
					<th>作者</th>
					<th>类别</th>
					<th>摘要</th>
					<th>时间</th>
					<th>评论数</th>
				</tr>
				
				<c:forEach items="${ pager.dataList }" var="post" varStatus="vs">
					<tr>
						<td>${ vs.count }</td>
						<td>
							<c:if test="${ !empty post.image }">
								<img alt="封面图" src="${ bp }/${ post.image }" style="width:50px;">
							</c:if>
							<c:if test="${ empty post.image }">
								暂无图片
							</c:if>
						</td>
						<td><a href="${ bp }/post?method=get&id=${ post.id }">${ post.title }</a></td>
						<td>${ post.nickname }</td>
						<td>${ PostTypeEnum.values()[post.type].getDesc() }</td>
						<td>${ post.summary }</td>
						<td><fmt:formatDate value="${ post.create_time }" pattern="yyyy年MM月dd日  HH点mm分"/></td>
						<td>${ post.comment_count }</td>
					</tr>
				</c:forEach>
				
			</table>
			
			<div id="paging">
				<c:if test="${ pager.currentPage gt 1 }">
					<a href="#" data-currentpage="1">首页</a>
					<a href="#" data-currentpage="${ pager.currentPage - 1 }">上一页</a>
				</c:if>
				<c:forEach begin="${ pager.startPage }" end="${ pager.endPage }" step="1" var="i">
					<c:if test="${ i eq pager.currentPage }">
						${ i }
					</c:if>
					<c:if test="${ i ne pager.currentPage }">
						<a href="#" data-currentpage="${ i }">${ i }</a>
					</c:if>
				</c:forEach>
				<c:if test="${ pager.currentPage lt pager.totalPages }">
					<a href="#" data-currentpage="${ pager.currentPage + 1 }">下一页</a>
					<a href="#" data-currentpage="${ pager.totalPages }">尾页</a>
				</c:if>
				<span>
					共${ pager.totalPages }页
				</span>
				
				<div style="display:inline-block;">
					每页
					<select name="pageSize">
						<option value="5" ${ pager.pageSize eq 5 ? "selected='selected'" : "" }>5</option>
						<option value="10" ${ pager.pageSize eq 10 ? "selected='selected'" : "" }>10</option>
						<option value="20" ${ pager.pageSize eq 20 ? "selected='selected'" : "" }>20</option>
					</select>
					条
					
					转到
					<input type="number" name="currentPage" value="${ pager.currentPage }" style="width:40px">
					页
					<button id="page_goto">跳转</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="${ bp }/static/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(function() {
			
			$('#paging a').click(function(e) {
				
				// 阻止a标签跳转
				e.preventDefault();
				// 从a标签上获取currentPage
				let currentPage = $(this).data('currentpage');
				// 从分页上获取pageSize
				let pageSize = $('#paging [name="pageSize"]').val();
				
				// 把数据给到搜索表单的隐藏域
				$('#search form [name="currentPage"]').val(currentPage);
				$('#search form [name="pageSize"]').val(pageSize);
				
				// 提交搜索表单
				$('#search form').submit();
			})
			
			$('#paging [name="pageSize"]').change(function() {
				$('#search form [name="pageSize"]').val($('#paging [name="pageSize"]').val());
				$('#search form [name="currentPage"]').val(1);
				$('#search form').submit();
			})
			
			$('#page_goto').click(function() {
				$('#search form [name="currentPage"]').val($('#paging [name="currentPage"]').val());
				$('#search form').submit();
			})
			
		})
	
	</script>
</body>
</html>